<template>
  <div class="app-container">
    <!--    头部-->
    <div class="my-detail-header">
      <div>
        <span style="
    font-size: x-large;
    margin-right: 5px;
    font-weight: bolder;
    vertical-align: middle;"
        >{{ route.prouteName }}</span>
        <span style="color: #606266">{{ route.prouteCode }}</span>
      </div>
      <el-descriptions :column="4">
        <el-descriptions-item label="创建人">{{ route.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ route.createTime }}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{ route.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ route.updateTime }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="my-detail-body">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-descriptions :column="2">
            <el-descriptions-item label="工艺路线编号">{{ route.prouteCode }}</el-descriptions-item>
            <el-descriptions-item label="工艺路线名称">{{ route.prouteName }}</el-descriptions-item>
            <el-descriptions-item label="状态" :span="2">
              <dict-tag :options="getStatus" :value="route.prouteStatus" />
            </el-descriptions-item>
            <el-descriptions-item label="说明" :span="2">
              {{ route.prouteDetail }}
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{ route.prouteDesc }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="工序组成">
          <el-table :data="prouteProcedureList"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="工序编码" align="center" prop="ppProcedureCode" />
            <el-table-column label="工序名称" align="center" prop="ppProcedureCode">
              <template slot-scope="scope">
                {{ getProcedureName(scope.row.ppProcedureCode) }}
              </template>
            </el-table-column>
            <el-table-column label="与下一道工序关系" align="center" prop="ppRelation">
              <template slot-scope="scope">
                <dict-tag :options="getProcedureSort" :value="scope.row.ppRelation" />
              </template>
            </el-table-column>
            <el-table-column label="是否为关键工序" align="center" prop="ppKey">
              <template slot-scope="scope">
                {{ scope.row.ppKey === '1' ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column label="准备时间" align="center" prop="ppReadyTime" />
            <el-table-column label="等待时间" align="center" prop="ppWaitTime" />
            <el-table-column label="颜色" align="center" prop="ppColor">
              <template slot-scope="scope">
                <el-color-picker v-model="scope.row.ppColor" :disabled="true"></el-color-picker>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="关联产品">
          <el-table :data="gbsGoods"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="产品编号" align="center" prop="pdCode" />
            <el-table-column label="产品名称" align="center" prop="pdName" />
            <el-table-column label="规格型号" align="center" prop="pdSpecType" />
            <el-table-column label="单位" align="center" prop="pdUnitType">
              <template slot-scope="scope">
                <span v-for="u in allUnits" :key="u.guId" v-if="scope.row.pdUnitType === u.guId">{{ u.guName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="BOM编号" align="center" prop="gbsBom.bomCode" />
            <el-table-column label="BOM版本" align="center" prop="gbsBom.bomVersion" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getProcedureRoute } from '@/api/yyj/pbs/procedureRoute'
import { allBom } from '@/api/yyj/gbs/bom'
import { allProcedure } from '@/api/yyj/pbs/procedure'
import { allUnit } from '@/api/yyj/gbs/unit'

export default {
  name: 'RouteDetail',
  dicts: ['yyj_common_status', 'pbs_procedure_sort'],
  data() {
    return {
      prouteCode: '',
      route: {},
      prouteProcedureList: [],
      gbsGoods: [],
      // 所有工序
      allProcedures: [],
      allUnits: []
    }
  },
  computed: {
    getStatus() {
      return this.dict.type.yyj_common_status
    },
    getProcedureSort() {
      return this.dict.type.pbs_procedure_sort
    }
  },
  created() {
    this.prouteCode = this.$route.params.prouteCode
    Promise.all([this.getUnits(), this.getBomList(), this.getAllProcedures(), this.getProcedureRoute(this.prouteCode)])
  },
  methods: {
    getProcedureRoute(prouteCode) {
      getProcedureRoute(prouteCode).then(res => {
        this.route = res.data.pbsProcedureRoute
        this.prouteProcedureList = res.data.pbsProuteProcedureList
        this.gbsGoods = res.data.gbsGoodList
        this.gbsGoods.forEach(e => {
          this.getBomByPdCode(e)
        })
      })
    },
    // 通过 pdCode 获取bom
    getBomByPdCode(row) {
      row.gbsBom = this.allBomList.find(e => e.bomPdCode === row.pdCode)
    },
    // 获取所有的bom
    getBomList() {
      allBom().then(res => {
        this.allBomList = res.data
      })
    },
    // 获取所有工序
    getAllProcedures() {
      allProcedure({
        procedureStatus: 1
      }).then(res => {
        this.allProcedures = res.data
      })
    },
    /** 查询单位 */
    getUnits() {
      allUnit().then(res => {
        this.allUnits = res.data
      })
    },
    // 通过编号转换名称
    getProcedureName(procedureCode) {
      return this.allProcedures.find(e => e.procedureCode === procedureCode).procedureName
    }
  }
}
</script>

<style scoped lang="scss">

.app-container {
  width: 80%;
  margin: 0 auto;

  .my-detail-header,
  .my-detail-body {
    width: 100%;
  }

  .my-detail-header {
    .el-descriptions-item__container .my-header-desc {
      font-weight: bolder !important;
      font-size: xx-large !important;
    }
  }


  .my-detail-body {
    .el-tabs {
      min-height: 450px;
    }
  }
}
</style>
